<template>
	<view class="individual-order">
		<NavBar title="推广订单" :isBack="true"></NavBar>
		<view class="content">
			<Tabs :tabs="tabs" @change="handleTabsChange" :active="active"></Tabs>
			<up-empty mode="list" v-if="!orderList.length"></up-empty>
			<view class="order-list">
				<view class="box" v-for="(item, index) in orderList" :key="index">
					<view class="header">
						<view>
							<view class="title">购买人：{{ item.address.name }}</view>
							<view>订单号：1354681221687434</view>
						</view>
						<view class="status" :class="{ 'fulfil': index }">{{ index ? '待结算' : '已结算' }}</view>
					</view>
					<view class="middle">
						<view>
							<image :src="item.shops.cover"></image>
						</view>
						<view>
							<view class="row">
								<view>{{ item.shops.title }}</view>
								<view class="num">x{{ item.num }}</view>
							</view>
							<view>卜公英（方形）30g玻璃瓶【买1送1】</view>
							<view class="price">¥ {{ item.shops.price }}</view>
						</view>
					</view>
					<view class="footer">
						<view class="row">
							<view>实付款</view>
							<view class="price">¥{{ item.paymoney }}</view>
						</view>
						<view class="row">
							<view>结算佣金</view>
							<view class="price">¥{{ item.commission.money }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import Tabs from '@/components/Tabs.vue';
import { peprsonalOrders } from '@/api/my.js'
import { reactive, toRefs, onMounted } from 'vue'
const state = reactive({
	tabs: [{
		label: "全部",
		value: 0
	},
	{
		label: "待结算",
		value: 1
	},
	{
		label: "已入账",
		value: 3
	}, {
		label: "已失效",
		value: 4
	},
	],
	active: 0,
	orderList: [],
	pageNum: 1
})

function handleTabsChange (item) {
	state.active = item.value
	getPeprsonalOrders()
}
async function getPeprsonalOrders () {
	uni.showLoading({ title: "加载中" })
	let params = {
		status: state.active ? state.active : undefined,
		page: state.pageNum
	}
	const res = await peprsonalOrders(params)
	state.orderList = res.data.data
	uni.hideLoading()
}
onMounted(() => {
	getPeprsonalOrders()
})
const {
	tabs,
	active,
	orderList
} = toRefs(state)
</script>

<style lang="scss" scoped>
.individual-order {
	.content {
		position: relative;
		padding: 36rpx;
		z-index: 1;

		:deep(.tabs) {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-bottom: 33rpx;

			.tab {
				font-size: 26rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #333333;
			}

			.active {
				font-weight: bold;
				font-size: 30rpx;
				color: #333333;
			}
		}

		.order-list {
			.box {
				background: #FFFFFF;
				border-radius: 22rpx 22rpx 22rpx 22rpx;
				padding: 30rpx;
				box-sizing: border-box;
				margin-bottom: 36rpx;

				.header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 18rpx;
					font-weight: 500;
					font-size: 20rpx;
					color: #999999;

					.title {
						font-weight: bold;
						font-size: 26rpx;
						color: #333333;
						margin-bottom: 11rpx;
					}

					.status {
						text-align: center;
						width: 102rpx;
						height: 38rpx;
						line-height: 38rpx;
						border-radius: 10rpx 10rpx 10rpx 10rpx;
						font-weight: 500;
						font-size: 18rpx;
						color: #FF0000;
						background: rgba(255, 0, 0, 0.1);
						border: 1rpx solid #FF0000;
					}

					.fulfil {
						background: rgba(88, 219, 207, 0.1);
						border: 1rpx solid #58DBCF;
						color: #58DBCF;
					}
				}

				.middle {
					display: flex;
					align-items: center;
					font-weight: 500;
					font-size: 20rpx;
					color: #999999;
					padding: 21rpx 0rpx 28rpx;
					border-bottom: 1rpx solid #F5F5F5;
					border-top: 1rpx solid #F5F5F5;

					.row {
						display: flex;
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
						margin-bottom: 8rpx;

						.num {
							font-weight: 500;
							font-size: 24rpx;
							color: #999999;
							margin-left: 47rpx;
						}
					}

					.price {
						font-weight: 800;
						font-size: 30rpx;
						color: #333333;
						margin-top: 40rpx;
					}

					image {
						width: 155rpx;
						height: 155rpx;
						margin-right: 24rpx;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
					}
				}

				.footer {
					margin-top: 36rpx;

					.row {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-weight: 500;
						font-size: 24rpx;
						color: #333333;

						.price {
							font-weight: 800;
							font-size: 24rpx;
							color: #333333;
						}
					}

					.row:first-child {
						margin-bottom: 31rpx;
					}
				}
			}
		}
	}
}
</style>